<template>
    <div class="mg-tb">
        <!--轮播图-->
        <div class="box">
            <banner :imgs="imgs"></banner>
        </div>
        <!--商品购买区-->
        <div class="box">
            <h4>{{info.title}}</h4>
            <p class="line"></p>
            <ul>
                <li>
                    市场价：
                    <s>￥{{info.market_price}}</s> &nbsp;&nbsp;&nbsp;&nbsp;销售价：
                    <span class="red">￥{{info.sell_price}}</span>
                </li>
                <li class="inpLi">
                    购买数量：
                    <inputnumber v-on:count="getcount"></inputnumber>
                    <!--获取商品的添加和减少-->
                    <!--动画小球-->
                    <transition 
                    @before-enter="beforeEnter"
                    @enter="Enter"
                    @after-enter="afterEnter"
                    >
                        <div v-if="isshow" id="ball"></div>
                    </transition>
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="shopcar">加入购物车</mt-button>
                </li>
            </ul>
        </div>
        <div class="box">
            <h5>商品参数</h5>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}</li>
                <li>上架时间：{{info.add_time | datefmt("YYYY-MM-DD")}}</li>
            </ul>
        </div>
    
        <div class="box">
            <div class="outher">
                <!--图文详情-->
                <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                    <mt-button class="pic" type="primary" size="large">图文详情</mt-button>
                </router-link>
                <!--商品评价-->
                <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                    <mt-button type="danger" size="large">商品评论</mt-button>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import apiphoto from "../../kits/Common.js";
import banner from '../subcom/banner.vue';
import apidomain from '../../kits/Common.js';
import inputnumber from '../subcom/inputNumber.vue';
import { vm, COUNTS } from '../../kits/vm.js';
import { setItem, goodsData } from '../../kits/localStorage.js';
export default {
    components: { banner, inputnumber },
    data() {
        return {
            isshow:false,//小球默认隐藏
            carnumber: 1,    //准备添加到购物车的数量
            imgs: [],
            id: 0,       //商品的id值
            info: {}
        }
    },
    created() {
        this.id = this.$route.params.id;  //获取到点击后的商品列表id
        this.getimgs();
        this.getinfo();
    },
    methods: {
        beforeEnter(el){
            el.style.transform = "translate(0px,0px)";
        },
        Enter(el,done){
            el.offsetWidth;//实时刷新 offsetHeight也行
            el.style.transform = "translate(52px,400px)";
            done();//保存当前结束动画
        },
        afterEnter(el){
            //重置小球的初始位置
            this.isshow = !this.isshow;
        },
        shopcar() {
            // 事件触发
            vm.$emit(COUNTS, this.carnumber);
            //数据存储
            goodsData.goodsid = this.id;
            goodsData.count = this.carnumber;
            setItem(goodsData);
            //加入购物车后显示小球动画
            this.isshow = !this.isshow;
        },
        getcount(count) {
            this.carnumber = count;
        },
        getinfo() {
            var url = apidomain.apidomain + "/api/goods/getinfo/" + this.id;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }

                this.info = body.message[0];
            })
        },
        getimgs() {
            // 确定url
            var url = apiphoto.apiphoto + "/api/getthumimages/" + this.id;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }

                this.imgs = body.message;
            })
        },
    }
}
</script>

<style scoped>
#ball {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 170px;
    top: 0;
    transition: all 0.4s ease;
    z-index: 100;
}

.inpLi {
    position: relative;
}

.pic {
    margin-bottom: 15px;
}

.box h4 {
    color: #099;
}

.box .line {
    height: 1px;
    width: 100%;
    background-color: #099;
}

.box ul {
    padding: 0;
}

.box li {
    list-style: none;
    margin: 15px 0;
}

.box .red {
    color: red;
}

.mg-tb {
    margin-top: 45px;
}

.mint-swipe-item[data-v-0112d75c] {
    height: 100%;
}

.box {
    border: 1px solid #099;
    margin: 5px;
    border-radius: 5px;
    padding: 10px;
}
</style>